<template>
  <el-container class="main_con">
    <div class="filter_con">
      <div class="button_area"><el-button v-has size="medium" type="primary" @click="syncHandle">同步商品</el-button></div>

      <div class="filter_area">
        <el-input class="serach_input mr_15 mt_15" v-model="obj.name" size="medium" placeholder="商品名称" style="width:300px;"></el-input>
        <label class="mr_15 ml_15">审核状态</label>
        <el-select clearable size="small" v-model="obj.status" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <el-button class="mr_15 mt_15" @click="searchList" size="medium">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table class="main-loading" :data="list" element-loading-text fit highlight-current-row>
        <el-table-column prop="name" width="275" label="商品">
          <template slot-scope="scope">
            <div class="proImg">
              <!-- <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.master" fit="fit"></vimage> -->
              <vimage style="width: 40px; height: 40px;margin-right:10px;" :src="scope.row.cover_img_url"></vimage>
              <span class="pro_t0" v-if="scope.row.type == 0">实</span>
              <span class="pro_t1" v-if="scope.row.type == 1">虚</span>
              <span style="flex: 1;">{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="直播售价">
          <template slot-scope="scope">
            <span v-if="scope.row.price_type == 1">一口价:￥{{ scope.row.price }}</span>
            <span v-if="scope.row.price_type == 2">￥{{ scope.row.price }} ~ ￥{{ scope.row.price2 }}</span>
            <span v-if="scope.row.price_type == 3">原价:￥{{ scope.row.price }}现价:￥{{ scope.row.price2 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="库存">
          <template slot-scope="scope">
            {{ scope.row.goods.total - scope.row.goods.sell }}
          </template>
        </el-table-column>
        <el-table-column prop="sell" label="销量">
          <template slot-scope="scope">
            {{ scope.row.goods.sell }}
          </template>
        </el-table-column>
        <el-table-column prop="live_good" label="审核状态">
          <template slot-scope="scope">
            {{ scope.row.status | getaudit }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280px">
          <template slot-scope="scope">
            <el-button type="text" @click="showedit(scope.row)">修改商品</el-button>
            <el-button v-if="scope.row.status == 1" type="text" @click="resetAudit(scope.row.room_goods_id)">撤销审核</el-button>
            <el-button v-if="scope.row.status == 3" type="text" @click="repeatAudit(scope.row.room_goods_id)">重新审核</el-button>
            <el-button type="text" @click="deleteAudit(scope.row.room_goods_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog title="修改商品" :visible.sync="show" width="540px">
      <el-form size="medium" ref="form" :model="form" :rules="formRules" label-width="100px" class="form">
        <el-form-item label="商品名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
        <el-form-item label="商品主图" prop="cover_img_url">
          <div class="icon_box" style="width: 100px;height: 100px;"><Upload :tempUrl="form.cover_img_url" @input="getImage"></Upload></div>
        </el-form-item>
        <el-form-item label="价格类型">
          <el-radio-group v-model="form.price_type">
            <el-radio :label="1">一口价</el-radio>
            <el-radio :label="2">价格区间</el-radio>
            <el-radio :label="3">折扣价</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="price" v-if="form.price_type == 1" label="一口价"><el-input v-model="form.price"></el-input></el-form-item>
        <el-form-item prop="price" v-if="form.price_type == 2" label="价格区间1"><el-input v-model="form.price"></el-input></el-form-item>
        <el-form-item prop="price2" v-if="form.price_type == 2" label="价格区间2"><el-input v-model="form.price2"></el-input></el-form-item>
        <el-form-item prop="price" v-if="form.price_type == 3" label="原价"><el-input v-model="form.price"></el-input></el-form-item>
        <el-form-item prop="price2" v-if="form.price_type == 3" label="折扣价"><el-input v-model="form.price2"></el-input></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateGoods">提 交</el-button>
        <el-button @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {goodlist, addAudit, resetAudit, repeatAudit, deleteAudit, updateGoods, changeLiveGoodStatus} from '@/api/mall/liver';
import Upload from '@/components/Upload/SingleImage2';
import {objextend} from '@/utils/index.js';
import {fitter_keyword} from '@/utils/index';

export default {
  data() {
    return {
      show: false,
      showWidth: '50%',
      pageType: 'productList',
      obj: {
        name: '',
        status: '',
        page: 1,
        size: 10
      },

      form: {
        name: '', //	是	int	商品名称
        price_type: 1, //	是	int	价格类型，1：一口价（只需要传入price，price2不传） 2：价格区间（price字段为左边界，price2字段为右边界，price和price2必传） 3：显示折扣价（price字段为原价，price2字段为现价， price和price2必传）
        price: '', //	是	int	商品价格
        price2: '', //	是	int	商品价格
        cover_img_url: '',
        room_goods_id: ''
        //
      },
      formRules: {
        name: [
          {
            required: true,
            message: '必须填写'
          },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到32 个字符',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '必须填写'
          }
        ],
        price2: [
          {
            required: true,
            message: '必须填写'
          }
        ]
      },
      objTemp: {},
      total: 0,
      options: [
        {
          value: 0,
          label: '未审核'
        },
        {
          value: 1,
          label: '审核中'
        },
        {
          value: 2,
          label: '审核通过'
        },
        {
          value: 3,
          label: '审核驳回'
        }
      ],

      isLoading: false,
      list: [],
      isCopy: true,
      dialogTableVisible: false,
      dialogqrcopy: ''
    };
  },
  components: {
    DatePicker,
    Upload
  },
  created() {
    //判断商品列表性质
    switch (this.$route.name) {
      case 'productList':
        //销售中
        this.obj.status = 1;
        break;
      case 'productListStock':
        //仓库中
        this.obj.status = 0;
        break;
      default:
        //no code
        break;
    }
    this.pageType = this.$route.name;
  },
  mounted() {
    this.searchList();
  },
  computed: {},
  filters: {
    getaudit(status) {
      switch (status) {
        case 0:
          return '未审核';
          break;
        case 1:
          return '审核中';
          break;
        case 2:
          return '审核通过';
          break;
        case 3:
          return '审核驳回';
          break;
      }
    }
  },
  methods: {
    syncHandle() {
      changeLiveGoodStatus({}).then(res => {
        this.getDataList();
      });
    },
    updateGoods() {
      this.$refs.form.validate(valid => {
        if (valid) {
          updateGoods(this.form).then(res => {
            this.show = false;
            this.getDataList();
          });
        }
      });
    },
    showedit(data) {
      this.form = objextend(this.form, data);
      this.show = true;
    },
    Auditproduct(id) {
      let data = {id: id};
      addAudit(data).then(res => {
        this.getDataList();
      });
    },
    resetAudit(id) {
      let data = {id: id};
      resetAudit(data).then(res => {
        this.getDataList();
      });
    },
    repeatAudit(id) {
      let data = {id: id};
      repeatAudit(data).then(res => {
        this.getDataList();
      });
    },
    deleteAudit(id) {
      let data = {id: id};
      deleteAudit(data).then(res => {
        this.getDataList();
      });
    },

    doCopy(orderNo) {
      this.$copyText(orderNo).then(
        res => {
          //this.$alert('复制成功');
          this.$message({
            message: '复制成功',
            type: 'success',
            duration: 2000
          });
        },
        error => {
          this.$alert('无法复制');
        }
      );
    },

    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //查询数据
    searchList() {
      //复制查询对象
      this.objTemp = fitter_keyword(this.obj);
      // //删除判断是否删除状态字段
      // if (this.objTemp.status == -1) {
      //   delete this.objTemp.status;
      // }
      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      goodlist(this.objTemp).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //遍历添加修改标识符
        o.data.forEach(e => {
          //this.$set(e,'editInventory',false);
          e.editInventory = false;
        });
        this.list = o.data;
        this.total = o.total;
      });
    },

    //切换分页
    changePage(page) {
      this.objTemp.page = page;
      this.getDataList();
    },
    getImage(data) {
      this.form.cover_img_url = data;
    },
    preview(vlue) {
      this.dialogTableVisible = !this.dialogTableVisible;
      let data = {
        id: vlue.id
      };
      getLinkUrl(data).then(res => {
        // console.log(res)

        this.dialogqrcopy = res.msg.link;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.proImg {
  display: flex;
  align-items: center;
}

.pro_t0 {
  color: #2d8cf0;
  background: #f0faff;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}

.pro_t1 {
  color: #e6a23c;
  background: #d2efe0;
  border-radius: 5px;
  padding: 0 3px;
  margin-right: 5px;
}
.dialog_box {
  min-width: 300px;
  margin: auto;
}
.qrcopy {
  width: 50%;
  min-width: 200px;
  display: block;
  margin: auto;
}
.disf {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 0 20px;
  span {
    padding: 10px;
  }
}
</style>
